<template>
  <div class="app-container">
    <!-- 财物查询 -->
    <FormData @handleQuery="handleQuery" :register="false" :pageSize="10"></FormData>

    <!-- 数据列表 -->
    <div>
      <el-table
        :data="tableData"
        stripe
        ref="multipleTable"
        tooltip-effect="dark"
      >
        <el-table-column prop="pSerialNum" label="序号" type="index"> </el-table-column>
        <el-table-column prop="pSerialNum" label="物品编号"> </el-table-column>
        <el-table-column prop="pName" label="物品名称"> </el-table-column>
        <el-table-column prop="count" label="数量" width="50"> </el-table-column>
        <el-table-column label="入库图片" align="center" prop="storeImg">
          <template slot-scope="scope">
            <image-preview :src="scope.row.storeImg || ''" :width="50" :height="50"></image-preview>
          </template>
        </el-table-column>
        <el-table-column label="出库照片" align="center" prop="deliverImg">
          <template slot-scope="scope">
            <image-preview
              :src="scope.row.deliverImg || ''"
              :width="50"
              :height="50"
            ></image-preview>
          </template>
        </el-table-column>
        <el-table-column prop="phName" label="办案人员"> </el-table-column>
        <el-table-column prop="wName" label="仓库"> </el-table-column>
        <el-table-column prop="manager" label="仓库人员"> </el-table-column>
        <el-table-column prop="registryTime" label="登记时间">
          <span slot-scope="scope">
            {{ dateFormat('YYYY-mm-dd HH:MM', scope.row.registryTime) }}
          </span>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <span @click="dialogTableVisible = true">
              <el-button size="mini" @click="handleEdit(scope.row)">详情</el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 详情 -->
    <div>
      <el-dialog title="详情" :visible.sync="dialogTableVisible">
        <el-form :data="sreachList" class="demo-form-inline">
          <el-row :gutter="100">
            <el-col :span="10" :offset="2"
              ><div class="grid-content bg-purple">
                <el-form-item label="物品编号:">
                  {{ sreachList.pSerialNum }}
                </el-form-item>
                <el-form-item label="物品名称:">
                  {{ sreachList.pName }}
                </el-form-item>
                <el-form-item label="物品类型:">
                  {{ cangku(sreachList.type) }}
                </el-form-item>
                <el-form-item label="仓库名称:">
                  {{ sreachList.wName }}
                </el-form-item>
                <el-form-item label="办案人员">
                  {{ sreachList.phName }}
                </el-form-item>
                <el-form-item label="">
                  <div>
                    <span> 入库图片 </span>
                  </div>
                  <image-preview
                    :src="sreachList.storeImg || ''"
                    :width="150"
                    :height="150"
                  ></image-preview>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="12"
              ><div class="grid-content bg-purple">
                <el-form-item label="管理/仓库人员:">
                  {{ sreachList.manager }}
                </el-form-item>
                <el-form-item label="手机号:">
                  {{ sreachList.phone }}
                </el-form-item>
                <el-form-item label="财物状态:">
                  {{ caiwu(sreachList.registryStatus) }}
                </el-form-item>
                <el-form-item label="处置状态:">
                  {{ chuzhi(sreachList.treatmentStatus) }}
                </el-form-item>
                <el-form-item label="数量:">
                  {{ sreachList.count }}
                </el-form-item>
                <el-form-item label="">
                  <div>
                    <span>入库图片</span>
                  </div>
                  <image-preview
                    :src="sreachList.deliverImg || ''"
                    :width="150"
                    :height="150"
                  ></image-preview>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-form-item label="登记时间:" prop="pCreateTime">
            {{ dateFormat('YYYY-mm-dd HH:MM', sreachList.registryTime) }}
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 分页 -->
    <Pagination
      class="page-container"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="pageGetList"
    ></Pagination>
  </div>
</template>
<script>
import { listFac } from '@/api/system/financing.js'
export default {
  data() {
    return {
      currentIndex: '',
      tableData: [],
      dialogTableVisible: false,
      sreachList: [],
      storeImg: '',
      deliverImg: '',
      // 总条数
      total: 0,
      // 分页查询
      queryParams: {
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  methods: {
    listFac() {
      listFac().then((data) => {
        this.tableData = data.rows
      })
    },
    // 详情
    handleEdit(row) {
      this.sreachList = row
    },
    // 取消
    submitForm: function () {
      this.sreachList = []
      this.listFac()
      this.dialogTableVisible = false
    },
    // 日期格式化
    dateFormat(fmt, date) {
      let ret = ''
      date = new Date(date)
      const opt = {
        'Y+': date.getFullYear().toString(), // 年
        'm+': (date.getMonth() + 1).toString(), // 月
        'd+': date.getDate().toString(), // 日
        'H+': date.getHours().toString(), // 时
        'M+': date.getMinutes().toString(), // 分
        'S+': date.getSeconds().toString() // 秒
        // 有其他格式化字符需求可以继续添加,必须转化成字符串
      }
      for (let k in opt) {
        ret = new RegExp('(' + k + ')').exec(fmt)
        if (ret) {
          fmt = fmt.replace(
            ret[1],
            ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0')
          )
        }
      }
      return fmt
    },
    // 搜索
    handleQuery(value) {
      listFac(value).then((data) => {
        this.tableData = data.rows
      })
    },

    // 分页
    pageGetList(){
      listFac(this.queryParams).then(res=>{
        this.tableData=res.rows
        this.total=res.total
      })
    },

    // 替换物品类型
    cangku(res) {
      switch (res) {
        case '1':
          return '普通物品'
        case '2':
          return '特殊物品'
        case '3':
          return '车辆'
        default:
          break
      }
    },
    // 替换财物状态
    caiwu(res) {
      switch (res) {
        case '1':
          return '已登记'
        case '2':
          return '已入库'
        case '3':
          return '已出库'
        default:
          break
      }
    },
    // 处置状态
    chuzhi(res) {
      switch (res) {
        case '0':
          return '无操作'
        case '1':
          return '退还'
        case '2':
          return '移交'
        case '3':
          return '销毁'
        default:
          break
      }
    }
  },

  mounted() {
    this.listFac()
    this.pageGetList()
  }
}
</script>
<style lang="scss" scoped>
.contain {
  margin: 10px;
}
</style>
